<template>
  <a-table
    :columns="columns"
    :data-source="data"
    :pagination="ipagination"
    @change="pageChange"
    bordered
    :rowKey="(record) => record.person_id"
  >
    <template slot="operation" slot-scope="text, record">
      <div class="editable-row-operations">
        <span>
          <a :disabled="editingKey !== ''" @click="test(record.person_id)"
            >心理测评</a
          >
          <a-divider type="vertical" />
        </span>
        <span>
          <a-popconfirm
            v-if="data.length"
            title="确定要删除吗?"
            @confirm="() => onDelete(record)"
          >
            <a :disabled="editingKey !== ''">删除</a>
          </a-popconfirm>
        </span>
        <span>
          <a-divider type="vertical" />
          <a :disabled="editingKey !== ''" @click="reset(record)">重置密码</a>
        </span>
      </div>
    </template>
  </a-table>
</template>
<script>
import { request } from "../../api/index";

const columns = [
  {
    title: "学号",
    dataIndex: "person_id",
    width: "25%",
    scopedSlots: { customRender: "person_id" },
  },
  {
    title: "姓名",
    dataIndex: "name",
    width: "25%",
    scopedSlots: { customRender: "name" },
  },
  {
    title: "性别",
    dataIndex: "sex",
    width: "25%",
    scopedSlots: { customRender: "sex" },
    customRender: (text) => {
      if (text == 0) {
        return "男";
      } else {
        return "女";
      }
    },
  },
  {
    title: "操作",
    dataIndex: "operation",
    width: "25%",
    scopedSlots: { customRender: "operation" },
  },
];
const data = [];

export default {
  inject: ["reload"],
  data() {
    this.cacheData = data.map((item) => ({ ...item }));
    return {
      id: this.$route.query.class_student_id,
      data: [],
      columns,
      editingKey: "",
      ipagination: {
        current: 1,
        pageSize: 8,
        total: data.length,
        showSizeChanger: true,
        showQuickJumper: true,
        hideOnSinglePage: true, // 少于一页时隐藏分页
        pageSizeOptions: ["8", "16"], //这里注意只能是字符串，不能是数字
        showTotal: (total, range) =>
          `显示${range[0]}-${range[1]}条，共有 ${total}条`,
      },
    };
  },
  mounted() {
    request({
      url: "/user/class_student",
      method: "post",
      data: {
        class_id: this.id,
      },
    })
      .then((res) => {
        // console.log(res);
        this.data = res.data.students;
        // console.log("!!!!接收到的data.students的值是：" + this.data);
      })
      .catch((err) => {
        // console.log(err);
      });
  },
  methods: {
    refresh() {
      this.reload();
    },
    pageChange(page, pageSize) {
      this.ipagination.current = page.current;
      this.ipagination.pageSize = page.pageSize;
    },
    handleChange(value, key, column) {
      const newData = [...this.data];
      const target = newData.filter((item) => key === item.key)[0];
      if (target) {
        target[column] = value;
        this.data = newData;
      }
    },
    test(key) {
      // console.log(key);
      //路由跳转到心理测评,传过去学生id,用this.$route.query.student_test_id接收
      this.$router.push({
        path: "/checkResults",
        query: { student_test_id: key, class_id: this.id },
      });
    },
    reset(key) {
      // console.log(key.person_id);
      request({
        url: "/user/reset_password",
        method: "post",
        data: {
          id: key.person_id,
        },
      })
        .then((res) => {
          // console.log(res);
          if (res.data.message == "success") {
            alert("密码重置成功");
          } else {
            alert("密码重置失败");
          }
        })
        .catch((err) => {
          // console.log(err);
        });
      this.reload();
    },
    onDelete(key) {
      // console.log(key.person_id);
      request({
        url: "/user/student_delete",
        method: "post",
        data: {
          id: key.person_id,
        },
      })
        .then((res) => {
          // console.log(res);
          if (res.data.message == "success") {
            alert("删除成功");
          } else {
            alert("删除失败");
          }
        })
        .catch((err) => {
          // console.log(err);
        });
      this.reload();
    },
    cancel(key) {
      const newData = [...this.data];
      const target = newData.filter((item) => key === item.key)[0];
      this.editingKey = "";
      if (target) {
        Object.assign(
          target,
          this.cacheData.filter((item) => key === item.key)[0]
        );
        delete target.editable;
        this.data = newData;
      }
    },
  },
};
</script>
<style scoped>
.editable-row-operations a {
  margin-right: 10px;
}
</style>
